<div class="page-content-actions">
    <button
        mat-fab
        color="default"
        (click)="clearOrders()"
        title="清空订单"
        matTooltip="清空订单"
    >
        <mat-icon>clear_all</mat-icon>
    </button>

    <button
        mat-fab
        color="primary"
        (click)="placeOrders()"
        title="创建订单"
        matTooltip="创建订单"
    >
        <mat-icon>add</mat-icon>
    </button>
</div>

<mat-grid-list class="order-list" cols="4" rowHeight="2:1">
    <ng-container *ngIf="orderService.isEmpty$ | async">
        <p>还没有订单哦...</p>
    </ng-container>

    <div *ngIf="!(orderService.isEmpty$ | async)" class="order-list-statistics">
        <span>新订单：{{ orderService.newOrderCount$ | async }}</span>
        <span>已接订单：{{ orderService.receivedOrderCount$ | async }}</span>
        <span>正在制作：{{ orderService.inProgressOrderCount$ | async }}</span>
        <span>已完成：{{ orderService.finishedOrderCount$ | async }}</span>
        <span>总计：{{ orderService.totalOrderCount$ | async }}</span>
    </div>
    <mat-grid-tile *ngFor="let order of orderService.orders$ | async">
        <app-order [order]="order"></app-order>
    </mat-grid-tile>
</mat-grid-list>
